<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .list-item {
        display: flex;
        margin-bottom: 10px;
        border: 1px solid gray;
      }
    </style>
  </head>
  <body>
    <div><button onclick="add()">新增</button></div>
    <div style="margin-bottom: 10px">
      <input type="text" placeholder="请输入搜索关键字" id="searchIpt" />
      <button onclick="search()">搜索</button>
    </div>
    <div class="list" id="list">
      <!-- <div class="list-item">
        <img
          src="../img/avatar.png"
          alt=""
          width="80"
          height="80"
          style="margin-right: 10px"
        />
        <div>
          <div>title</div>
          <div>desc</div>
          <div>source</div>
        </div>
      </div>
      <div class="list-item">
        <img
          src="../img/avatar.png"
          alt=""
          width="80"
          height="80"
          style="margin-right: 10px"
        />
        <div>
          <div>title</div>
          <div>desc</div>
          <div>source</div>
        </div>
      </div> -->
    </div>
    <script>
      let arr = [
        {
          src: "../img/avatar.png",
          title: "标11题1中国",
          desc: "说明1",
          source: "来源1",
        },
        {
          src: "../img/avatar.png",
          title: "标题2",
          desc: "说明2",
          source: "来源2",
        },
        {
          src: "../img/avatar.png",
          title: "标题4",
          desc: "说明4",
          source: "来源4",
        },
        {
          src: "../img/avatar.png",
          title: "标题5",
          desc: "说明5",
          source: "来源5",
        },
        {
          src: "../img/avatar.png",
          title: "标题6",
          desc: "说明6",
          source: "来源6",
        },
      ];

      // 新增
      function add() {
        // const title = prompt()
        arr.push({
          src: "../img/avatar.png",
          title: "新增标题",
          desc: "新增说明",
          source: "新增来源",
        });
        show(arr);
      }

      // 编辑
      function edit(index) {
        arr.splice(index, 1, {
          src: "../img/avatar.png",
          title: "修改标题",
          desc: "修改说明",
          source: "修改来源",
        });
        show(arr);
      }

      // 删除
      function del(index) {
        arr.splice(index, 1);
        show(arr);
      }

      // 查找
      function search() {
        const searchVal = document.getElementById("searchIpt").value;
        // 搜索方法：1：全词匹配； 2：模糊搜索
        // const result = arr.filter(item=>item.title==searchVal)
        const result = arr.filter((item) => item.title.indexOf(searchVal) > -1);
        show(result, searchVal);
      }

      const list = document.getElementById("list");

      show(arr);

      // 跳转
      function jump() {
        location.href = "list-demo-detail.html";
      }

      // 显示
      function show(arr, searchVal) {
        list.innerHTML = "";
        arr.forEach((ele, index) => {
          const newArr = ele.title.split(searchVal);
          // console.log(newArr);
          let titleWrap = "";
          newArr.forEach((item, index) => {
            titleWrap += `<span>${item}</span><span style="color: red">${
              index < newArr.length - 1 ? searchVal : ""
            }</span>`;
          });
          // let titleWrap = ele.title.replaceAll(
          //   `${searchVal}`,
          //   `<span style="color: red">${searchVal}</span>`
          // );

          list.innerHTML += `<div class="list-item" onclick="jump(${index})">
            <a href="list-demo-detail.html?title=${ele.title}&desc=${ele.desc}&source=${ele.source}">
            <img
              src="../img/avatar.png"
              alt=""
              width="80"
              height="80"
              style="margin-right: 10px"
            />
            <div>
                <div>${titleWrap}</div>
                <div>${ele.desc}</div>
                <div>${ele.source}</div>
                <div><button onclick="edit(${index})" style="margin-right: 10px">修改</button><button onclick="del(${index})">删除</button></div>
            </div>
            </a>
          </div>`;
        });
      }
    </script>
  </body>
</html>
